<template>
    <div>
        <app-search>
            <el-form :model="searchForm" :label-position="labelPosition" label-width="20%">
                <el-col :xs="23" :sm="14">
                <el-form-item label="类型：">
                    <el-col :span="12">
                    <el-input v-model="searchForm.type"></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="描述：">
                    <el-col :span="12">
                    <el-input v-model="searchForm.description"></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item>
                    <el-col :span="12">
                    <el-button type="primary" icon="el-icon-search" @click="searchCodeType()">查询</el-button>
                    </el-col>
                </el-form-item>
                </el-col>
            </el-form>
        </app-search>

        <table-mixin pagination paginationAlign="left" :paginationTotal="paginationTotal"
            :pageChange="pageChange">
            <el-table v-loading="tableData.loading" :data="tableData.body" stripe border style="width:100%">
                <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
                <el-table-column label="类型" prop="type" min-width="35%"></el-table-column>
                <el-table-column label="描述" prop="description" min-width="45%"></el-table-column>
                <el-table-column label="操作" class-name="centerCell">
                    <template slot-scope="scope">
                        <el-button type="edit" size="small" icon="el-icon-edit" @click="gotoEditDict(scope.row.id)">编辑</el-button>
                        <el-button type="primary" size="small" icon="el-icon-view">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </table-mixin>
    </div>
</template>

<script>
//import { mapActions } from 'vuex'

export default {
    name: "DictSearch",
    data() {
        return {
            labelPosition: 'right',
            searchForm: {
                type: '',
                description: ''
            },
            tableData: {
                loading: true,
                body: []
            },
            currentPage: 1,
            paginationTotal: 0
        }
    },
    mounted() {
        console.log("dict mounted");
        this.searchCodeType()
    },
    methods: {

        // 获取table数据
        async searchCodeType() {
            let res = await this.$axios.post('/sys/cdtype/list', {
                    limit: this.$store.state.pageSize,
                    offset: (this.currentPage - 1) * this.$store.state.pageSize,
                    type: this.searchForm.type,
                    description: this.searchForm.description
                });

            console.log("返回代码类型列表：", res);
            this.tableData.loading = false;
            this.tableData.body = res.rows;
            this.paginationTotal = res.total;
        },

        pageChange(currentPage) {
            this.currentPage = currentPage;
            this.searchCodeType();
        },

        gotoEditDict(dictId) {
            this.$store.dispatch('basiccfg/showEditDict', dictId);
        }
    }
}
</script>

